<template>
  <div class="app">
    <h1>App</h1>
    <p>接收到的学校信息:{{ schoolMessage }}</p>
    <p>接收到的学生信息:{{ studentMessage }}</p>

    <school-com></school-com>

    <student-com></student-com>
  </div>
</template>

<script>
// 引入School组件
import Student from "./components/Student.vue";
import School from "./components/School.vue";

// 引入 pubsub 第三方库用于 消息订阅与发布
import pubsub from "pubsub-js";

export default {
  name: "App",
  components: {
    "student-com": Student,
    "school-com": School,
  },
  data() {
    return {
      schoolMessage: "",
      studentMessage: "",
    };
  },
  mounted() {
    this.getSchoolMessage = pubsub.subscribe(
      "getSchool-message",
      (messageName, data) => {
        console.log(
          "有人发布了 getSchool-message 消息, getSchool-message 消息的回调执行了:",
          messageName,
          data
        );
        this.schoolMessage = data;
      }
    );
    this.getStudentMessage = pubsub.subscribe(
      "getStudent-message",
      (messageName, data) => {
        console.log(
          "有人发布了 getStudent-message 消息, getStudent-message 消息的回调执行了:",
          messageName,
          data
        );
        this.studentMessage = data;
      }
    );
  },
  beforeDestroy() {
    console.log(111);
    pubsub.unsubscribe([this.getSchoolMessage, this.getStudentMessage]);
  },
};
</script>

<style lang="sass">
$padding: 10px
$margin: 10px

.app
  background-color: gray
  padding: $padding

  h1
    background-color: pink
    text-align: center
    margin: $margin

  p
    background-color: yellowgreen
    padding: $padding
    margin: $margin
</style>
